<!-- 门店文章中心 -->
<template>
  <div id="storeArticle">
    <c-title :text="pageTitle"></c-title>
    <van-sticky :offset-top="40">
      <van-search placeholder="请输入文章标题/关键词" clearable v-model="keyword" @search="onSearch"></van-search>
    </van-sticky>
    <div class="p-12">
      <div class="list flex-column p-12" v-for="item in list" :key="item.id">
        <div class="flex p-b-12" v-if="item.has_one_store" @click.stop="toUrl('HomeSeller',{'store_id': item.has_one_store.id })">
          <img class="w-40" :src="item.has_one_store.thumb" alt="" style="border-radius: 20px;margin-right: 12px;">
          <div style="flex: 1;overflow: hidden;">
            <div class="line-clamp-1 f-bold f-15">{{item.has_one_store.store_name}}</div>
            <div class="f-12 color-686868">{{item.has_one_store.full_address}}</div>
          </div>
        </div>
        <img class="w-100 m-b-12" :src="item.thumb" alt="" style="border-radius: 8px;">
        <div>
          <div class="f-bold f-15 line-clamp-1 p-b-5">{{item.title}}</div>
          <div class="flex-j-sb color-686868 f-12" @click.stop="toUrl('articleContent',{'id': item.id,'isgood': 0, 'store_id': item.has_one_store.id })">
            <div>{{item.virtual_at}}</div>
            <div class="flex">查看详情 <i class="iconfont icon-advertise-next"></i></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin], //加载更多
  data () {
    return {
      keyword: '',
      list: [],
      current_page: 1,
      last_page: 1,
      isLoadMore: true,
      pageTitle: ''
    };
  },

  activated() {},

  components: {},

  computed: {},

  created() {
    this.initData();
    this.getData();
  },

  methods: {
    async getData() {
      let { msg, result, data } = await $http.get("plugin.store-article.frontend.store.article.get-articles", { keyword: this.keyword,page: this.current_page},'.');
      if (result == 0) {
        return this.$toast(msg);
      }
      this.pageTitle = data.title||'门店文章中心';
      this.fun.setWXTitle(this.pageTitle);
      this.list = this.list.concat(data.articles.data);
      this.current_page = data.articles.current_page;
      this.last_page = data.articles.last_page;
      this.isLoadMore = true;
    },
    onSearch(){
      this.initData();
      this.getData();
    },
    initData(){
      this.current_page = 1;
      this.isLoadMore = true;
      this.last_page = 1;
      this.list = [];
    },
    getMoreData() {
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.current_page >= this.last_page) {
        return;
      }
      this.current_page += 1;
      this.getData();
    },
    toUrl(name, params = {}, query = {}) {
      this.$router.push(this.fun.getUrl(name, params, query));
    },
  }
};

</script>
<style lang='scss' rel='stylesheet/scss' scoped>
.w-40 {
  width: 2.5rem;
}
.w-100 {
  width: 100%;
}
.p-b-12{
  padding-bottom: 0.75rem;
}
.p-b-5 {
  padding-bottom: 5px;
}
.m-b-12{
  margin-bottom: 0.75rem;
}
.p-12{
  padding: 0.75rem;
}
.color-686868{
  color: #686868;
}
#storeArticle{
  text-align: left;
  .list{
    background: #ffffff;
    margin-bottom: 0.75rem;
    border-radius: 12px;
  }
}
</style>